<template>
  <view class="" v-if="info.serve">
    <u-navbar :border-bottom="false" :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" title="整体治疗方案" :immersive="true"></u-navbar>
    <view class="" style="width: 100%; height: 280rpx; background: url(https://wenzhen.jiangkukeji360.com/static/index/bg.png) no-repeat; background-size: 100% 100%">
      <view class="" style="padding: 50rpx 0 24rpx 28rpx"></view>
      <view class="" style="margin: 28rpx; background: #fff; box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1); border-radius: 20rpx; text-align: center">
        <image src="https://wenzhen.jiangkukeji360.com/static/index/g0.png" mode="" style="width: 130rpx; height: 130rpx"></image>
        <view class="" style="display: flex; align-items: center; font-size: 28rpx; justify-content: center; padding-bottom: 41rpx">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/add.png" mode="" style="width: 32rpx; height: 32rpx"></image>
          <view class="" style="margin-left: 15rpx">添加收货地址</view>
        </view>
      </view>
    </view>
    <view class="" style="height: 30rpx"></view>

    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="font-size: 32rpx; font-weight: bold; padding: 39rpx 34rpx 0">请选择快递公司</view>
      <view
        class=""
        style="padding: 0 17rpx; height: 140rpx; border-bottom: 1rpx solid #e7e7e7; display: flex; align-items: center; margin: 0 17rpx; justify-content: space-between"
        v-for="(i, k) in list"
        :key="k"
        @tap="current = k"
      >
        <view class="" style="font-size: 30rpx; color: #111">
          {{ i.express_name }}
        </view>
        <radio :checked="current == k" color="#0FB8FF" style="transform: scale(0.7)"></radio>
      </view>
    </view>

    <view class="bg-white radius20" style="padding: 27rpx 0rpx; margin: 0 28rpx; border-radius: 20rpx 0" v-if="info.serve">
      <view class="text-center col-333 font30">处方</view>
      <view class="flex align-center text-center" style="margin-top: 43rpx">
        <view class="flex-sub" style="border-right: solid 1rpx #e8e8e8">
          <view class="font26" style="color: #888">姓名</view>
          <view class="col-333 margin-top-sm">
            {{ info.serve.patient_name }}
          </view>
        </view>
        <view class="flex-sub" style="border-right: solid 1rpx #e8e8e8">
          <view class="font26" style="color: #888">性别</view>
          <view class="col-333 margin-top-sm">
            {{ info.serve.patient_gender == 1 ? '男' : '女' }}
          </view>
        </view>
        <view class="flex-sub" style="border-right: solid 1rpx #e8e8e8">
          <view class="font26" style="color: #888">年龄</view>
          <view class="col-333 margin-top-sm">{{ info.serve.patient_age }}岁</view>
        </view>
        <view class="flex-sub">
          <view class="font26" style="color: #888">科别</view>
          <view class="col-333 margin-top-sm">
            {{ info.department_name }}
          </view>
        </view>
      </view>
      <!-- @click="open" -->
      <view class="flex" style="padding: 30rpx 44rpx 0rpx">
        <view class="font26" style="background-color: #e6f2fe; color: #237dd7; padding: 12rpx 13rpx; border-radius: 8rpx">诊断：{{ info.serve.Illness }}</view>
      </view>
    </view>
    <!-- 处方 -->
    <view class="bg-white radius20" style="padding: 32rpx 34rpx; margin: 0 28rpx; border-radius: 0rpx 20rpx">
      <view class="flex align-center">
        <view class="col-333 flex-sub">RP：处方药</view>
        <view class="font26 col-666">
          {{ info.extract_time_text }}
        </view>
      </view>
      <view class="" v-for="(item, index) in info.drgus" :key="index" style="padding: 26rpx 28rpx; border: solid 1rpx #e8e8e8; border-radius: 12rpx; margin-top: 31rpx">
        <view class="flex align-center">
          <view class="flex-sub col-333">{{ index + 1 }}、枚满（{{ item.drugs_name }}）</view>
          <!-- <view class="flex">
						<view class="font26" style="background-color: #E6F2FE;color: #237DD7;padding: 5rpx 14rpx;border-radius: 8rpx;">
							7天
						</view>
					</view> -->
        </view>
        <view class="font26 col-999" style="margin-top: 29rpx">药品规格：{{ item.norms }}</view>
        <view class="font26 col-999" style="margin-top: 21rpx">发药剂量：{{ item.number.number }}粒</view>
        <view class="text-right font26 col-666" style="margin-top: 35rpx">用法：{{ item.usage }}</view>
      </view>
    </view>
    <!-- 医嘱 -->
    <view class="bg-white radius20 margin-top col-333" style="margin: 15rpx 28rpx">
      <view class="" style="padding: 38rpx 36rpx; border-bottom: solid 1rpx #eeeeee">医嘱：{{ info.serve.tips }}</view>
      <view class="" style="padding: 38rpx 36rpx">医师：{{ info.doctor_name }}</view>
    </view>
    <!-- 协议 -->
    <uni-popup backgroundColor="#FFF" type="center" ref="pop_xy">
      <view class="po-rela" style="padding: 54rpx 45rpx; width: 532rpx">
        <view class="text-center font30 col-333">{{ info.doctor_name }}为您本次诊断为</view>
        <view class="flex align-center justify-center margin-top-sm">
          <view
            class="text-center font26 flex align-center justify-center"
            :style="'background: url(' + img + '/web/bbg.png) no-repeat;background-size: cover;width: 288rpx;height: 48rpx;color: #0087FE;'"
          >
            {{ info.serve.Illness }}
          </view>
        </view>
        <view class="font26 col-666" style="margin-top: 33rpx; line-height: 42rpx">请确认您在实体医疗机构有过该诊断就 诊，并已将病历资料提供给医生</view>
        <view class="flex justify-center align-center" style="margin-top: 34rpx; line-height: 39rpx">
          <radio :checked="radio" color="#0087FE" style="transform: scale(0.6)" @tap="radio = !radio"></radio>
          <view class="flex-sub font24 padding-left-xs letter col-999">
            <text class="" @tap="radio = !radio">确认并同意</text>
            <text style="color: #63b6ff" @tap="util.urlTo('../index/xieyi?type=3')">《互联网诊疗风险告知及同意书》</text>
          </view>
        </view>
        <view class="flex align-center justify-center" style="margin-top: 60rpx">
          <view @click="closecf(1)" class="btnbg" style="width: 440rpx; height: 80rpx">确认查看处方</view>
        </view>
        <view @click="closecf(2)" class="cuIcon-close" style="position: absolute; right: 24rpx; top: 24rpx"></view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      info: {},
      radio: false,
      img: this.util.api.img,
      list: [],
      current: 0,
      opend: null
    };
  },
  // onReady() {
  // this.$refs.pop_xy.open()
  // },
  onLoad(e) {
    e.id ? (this.id = e.id) : '';
    // e.open ? this.open()  : ''
  },
  updated() {
    if (this.opend) {
      this.open();
    }
  },
  // mounted() {
  // 	this.opend ? this.open() : ''
  // },
  onShow() {
    this.getinfo();
    this.calss();
  },
  methods: {
    open() {
      // console.log(this.$refs,'-----')
      // this.$nextTick(()=>{// 调用$nextTick函数
      console.log(this.$refs, '什么');
      this.$refs.pop_xy.open();
      this.opend = 1;
      // })
    },
    closecf(e) {
      if (e == 1) {
        if (!this.radio) {
          this.util.showToast('请阅读并同意同意书后查看');
          return false;
        }
        this.$refs.pop_xy.close();
      } else {
        uni.navigateBack();
      }
    },
    getinfo() {
      this.util
        .request(
          'order/prescribeDetails',
          {
            order_id: this.id
          },
          'post'
        )
        .then((res) => {
          this.info = res;
        });
    },
    calss() {
      this.api({
        url: '/api/index/getExpressList',
        method: 'post'
      }).then((res) => {
        this.list = res.data;
        this.list.push({ express_name: '院内自提', id: 'type' });
      });
    }
  }
};
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>
